<template>
  <div>
    <ContentWrap title="主数据">
      <el-form
        ref="ruleFormRef"
        :rules="rules"
        :model="ff"
        label-position="top"
        :inline="false"
        class="demo-form-inline"
      >
        <el-form-item label="省份" prop="selectedOptions">
          <el-cascader
            :options="options"
            v-model="ff.selectedOptions"
            v-bind="$attrs"
            @change="handleChange"
          />
        </el-form-item>

        <el-form-item label="畜别" prop="breed">
          <el-select v-model="ff.breed" placeholder="请选择畜别" @change="breedChange">
            <el-option
              v-for="(key, index) in dict.breed"
              :key="index"
              :label="key.label"
              :value="key.value"
            />
          </el-select>
        </el-form-item>

        <el-form-item label="品种" prop="breed_sub">
          <el-select v-model="ff.breed_sub" placeholder="请选择品种">
            <el-option
              v-for="(key, index) in breedSubData"
              :key="index"
              :label="key.label"
              :value="key.value"
            />
          </el-select>
        </el-form-item>

        <el-form-item label="日期" prop="time">
          <el-date-picker v-model="ff.time" type="date" placeholder="请选择日期" :size="size" />
        </el-form-item>

        <el-form-item label="价格" prop="price">
          <el-input v-model="ff.price" placeholder="价格（每公斤）" style="width: 200px" />
        </el-form-item>

        <el-form-item label="备注" prop="note">
          <el-input v-model="ff.note" placeholder="备注" style="width: 200px" />
        </el-form-item>
      </el-form>
    </ContentWrap>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue'
//二选一
import { provinceAndCityData, codeToText } from 'element-china-area-data'
import { ElForm, ElFormItem } from 'element-plus'
import { sysDictRelsApi } from '@/api/dict'

// import { required } from '@/utils/formRules'
// import { FormRules } from 'element-plus'
// import { provinceAndCityData } from 'element-china-area-data'

// 获取字典
import { useCache } from '@/hooks/web/useCache'
const { wsCache } = useCache()
const dict = wsCache.get('dict')

const ruleFormRef = ref()
const dictRelsData = ref() // 联动数据

const breedSubData = ref([]) // 品种的枚举

const ff = ref([])

const options = provinceAndCityData
// const selectedOptions = ref()
ff.value.selectedOptions = []
const rules = reactive({
  selectedOptions: [{ required: true, message: '请选择省份', trigger: 'change' }],
  breed: [{ required: true, message: '请选择畜别', trigger: 'change' }],
  breed_sub: [{ required: true, message: '请选择品种', trigger: 'change' }],
  time: [{ type: 'date', required: true, message: '请选择日期', trigger: 'change' }],
  price: { required: true, message: '请输入价格', trigger: 'blur' }
})

const handleChange = (value) => {
  ff.value.selectedOptions = value
  console.log(value, codeToText[value[0]], 'd') //打印区域码所对应的属性值即中文地址
}

// 获取联动关系
const getDictRels = async () => {
  const res = await sysDictRelsApi({
    p_type: 'breed',
    c_type: 'breed_sub'
  })
    .catch(() => {})
    .finally(() => {})
  if (res) {
    dictRelsData.value = res.data
  }
}

// 选择畜别的时候触发，处理品种类容
const breedChange = () => {
  console.log(11)
  breedGetSub(ff.value.breed)
  ff.value.breed_sub = ''
  // const new_search = unref(searchRef)
  // new_search.setData({ ...new_search.getData(), breed_sub: '' })
}

// 根据畜别查询品种
const breedGetSub = async (breed_value) => {
  console.log('breed_value', breed_value, !breed_value)
  if (!breed_value) {
    breedSubData.value = []
  } else {
    let breedData = dictRelsData.value.find((item) => {
      return item.value == breed_value
    })
    breedSubData.value = breedData.children
  }
}

const init = async () => {
  // 获取关联关系
  await getDictRels()
}
init()

defineExpose({ ff, ruleFormRef })
</script>

<style lang="scss" scoped>
.el-form {
  display: flex;
  flex-wrap: wrap;
}

.el-form > div {
  width: 50%;
}
</style>
